<template>
  <a-card :bordered="false" style="width: 100%;border-radius: 4px">
    <a-alert message="店铺近60天好评率(0%)" type="info" show-icon :style="{marginBottom:'15px',borderRadius:'6px'}"/>
    <div class="searchForm">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item :label="`商品编号`">
              <a-input placeholder="请输入商品编号" v-model="form.prdNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`商品名称`">
              <a-input placeholder="请输入商品名称" v-model="form.prdName" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`评价等级`">
              <a-select v-model="form.evaLevel" placeholder="请选择评价等级" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  好评
                </a-select-option>
                <a-select-option value="02">
                  中评
                </a-select-option>
                <a-select-option value="03">
                  差评
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`用户/ID`">
              <a-input placeholder="请输入用户/ID" v-model="form.customNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`评价时间`">
              <a-range-picker v-model="createTime" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`是否回复`">
              <a-select v-model="form.isReturn" placeholder="请选择是否回复" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  未回复
                </a-select-option>
                <a-select-option value="02">
                  已回复
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`订单编号`">
              <a-input placeholder="请输入订单编号" v-model="form.ordNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`是否有图`">
              <a-select v-model="form.isHaveImg" placeholder="请选择是否有图" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  有图
                </a-select-option>
                <a-select-option value="02">
                  无图
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`追评`">
              <a-select v-model="form.isAddEva" placeholder="请选择是否追评" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  有追评
                </a-select-option>
                <a-select-option value="02">
                  无追评
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`更改评论`">
              <a-select v-model="form.isChangeEva" placeholder="请选择是否更改评论" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  有更改
                </a-select-option>
                <a-select-option value="02">
                  无更改
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="searchTool">
      <a-button type="primary" @click="handleQuery">
        查询
      </a-button>
      <a-button :style="{marginLeft:'10px'}" @click="handleReset">
        重置
      </a-button>
    </div>

    <div class="searchTable">
      <a-table
        size="small"
        :rowKey="`evaNo`"
        :columns="tableColumns"
        :data-source="tableDatas"
        :pagination="{ current:form.pageNumb,pageSize: 10 ,total:total}"
        @change="tableChange">
        <template slot="prdInfo" slot-scope="text, record">
          <div style="width: 200px">
            <div style="width: 50px;float: left">
              <img :src="url + `/file/` + record.prd.prdImgCover " style="width:50px">
            </div>
            <div style="width: 150px;float: right;padding-left: 10px">
              <h3>{{ record.prd.prdName }}</h3>
              <h5>{{ record.prd.prdSubName }}</h5>
            </div>
          </div>
        </template>

        <template slot="evaLevel" slot-scope="text, record">
          <Rate v-if="record.evaLevel == '01'" :default-value="5" disabled :tooltips="`好评`"/>
          <Rate v-if="record.evaLevel == '02'" :default-value="3" disabled :tooltips="`中评`"/>
          <Rate v-if="record.evaLevel == '03'" :default-value="1" disabled :tooltips="`差评`"/>
        </template>

        <template slot="action">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()"> 操作 <DownOutlined /> </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="complaintVisible = true">投诉</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="replyVisible = true">回复</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-table>
    </div>

    <a-modal
      :visible="complaintVisible"
      title="投诉"
      ok-text="确认"
      cancel-text="取消"
      @ok="complaintVisible = !complaintVisible"
      @cancel="complaintVisible = !complaintVisible">
      <a-textarea
        placeholder="请输入投诉内容"
        :auto-size="{ minRows: 5, maxRows: 5 }"/>
    </a-modal>

    <a-modal
      :visible="replyVisible"
      title="回复"
      ok-text="确认"
      cancel-text="取消"
      @ok="replyVisible = !replyVisible"
      @cancel="replyVisible = !replyVisible">
      <a-textarea
        placeholder="请输入回复内容"
        :auto-size="{ minRows: 5, maxRows: 5 }"/>
    </a-modal>

  </a-card>
</template>

<script>
  import { queryEva } from '@/api/eva'
  import { Rate } from 'ant-design-vue'

  const columns = [
    {
      title: '商品信息',
      scopedSlots: { customRender: 'prdInfo' }
    },
    {
      title: '订单编号',
      key: 'ord.ordNo',
      dataIndex: 'ord.ordNo'
    },
    {
      title: '用户/ID',
      key: 'customNo',
      dataIndex: 'customNo'
    },
    {
      title: '评价等级',
      scopedSlots: { customRender: 'evaLevel' }
    },
    {
      title: '评价时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  export default {
    name: 'ManageEvaluate',
    components: { Rate },
    data () {
      return {
        complaintVisible: false,
        replyVisible: false,
        url: process.env.VUE_APP_API_BASE_URL,
        form: {
          prdNo: '',
          prdName: '',
          evaLevel: '',
          customNo: '',
          isReturn: '',
          ordNo: '',
          isHaveImg: '',
          isAddEva: '',
          isChangeEva: '',
          pageNumb: 1
        },
        createTime: [],
        total: 0,
        tableColumns: columns,
        tableDatas: []
      }
    },
    methods: {
      handleQuery () {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.pageNumb = 1
        queryEva(this.form).then(rsp => {
          this.total = rsp['total']
          this.tableDatas = rsp['data']
        })
      },
      handleReset () {
        this.form = {}
        this.createTime = []
      },
      tableChange (pagination) {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.pageNumb = pagination.current
        queryEva(this.form).then(rsp => {
          this.total = rsp['total']
          this.tableDatas = rsp['data']
        })
      },
      complaint () {

      },
      reply () {

      }
    },
    mounted () {
      this.handleQuery()
    }
  }
</script>

<style>
  .ant-form-item-label {
    width: 100px !important;
    text-align: right !important;
  }

  .searchTool {
    margin-top: 20px;
    float: right;
  }

  .searchTable {
    margin-top: 20px;
    float: left;
    width: 100%;
  }
</style>
